<!-- 趋势图表 -->

<template>
  <EasyChart :baseOption="OPTION" :option="option" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from '@admin/views/Energy/Overview/components/TrendChart/props'
import OPTION from './OPTION'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'TrendChart',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixInfo()],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 基础配置
     */
    OPTION: () => OPTION,

    /**
     * 图表配置
     */
    option() {
      const { names, dataList, infoParam } = this
      const { dateType: type } = infoParam

      const option = {
        xAxis: { data: names },
        series: dataList.map((data) => ({ data })),
      }

      const TYPE = { 1: '昨日', 2: '上周', 3: '上月' }
      Object.assign(option.series[1], { name: `${TYPE[type]}同期` })

      return option
    },
  },
}
</script>
